<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>About_Me</title>
		<link href="css/custom-theme/jquery-ui-1.8.21.custom.css" type="text/css" rel="stylesheet"/>
		<link href="css/common.css" rel="stylesheet" type="text/css"/>
		<link href="css/custom.css" rel="stylesheet" type="text/css" />
		<link href="css/UI.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery1.7.2.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('#header').load('common/header.html','',function(){
				$("#header .menu li a").removeClass("current_page");
          		$("a#ch").addClass("current_page");
			});
			$('#footer').load('common/footer.html');
			
			
		});
		
		</script>
	</head>

	<body>
		<div class="container">
				<div class="headerlogo"><a href="index.html">igator</a></div>
				<h1 class="ch_title">College Harmony</h1>
		</div>
			
			<div class="clear_float"></div>
			<div class="College_body">
			<div class="College_bg_top"></div>
			<div class="College_bg_repeat">
				<div class="body_topLeftBg">
					<div class="body_topRightBg">
						<div class="body_footLeftBg">
							<div class="body_footRightBg">
								<div class="person-details_box">
									<div class="photo"></div>
									<div class="person-details">
											<h2 class="person_name">Lady Gaga</h2>
											<div class="say">
												<span class="left"></span>
												<span class="repeat">I want to find a male for dating</span>
												<span class="right"></span>
											</div>
											<div class="text">
												<p>Software engineer | Computer science</p>
												<p><span>Birthday:</span> 1989.01.01</p>
												<p><span>Age: </span>19</p>
												<p><span>Gender: </span>     Female</p>
												<p><span>Hometown:</span>  Newyork</p>
												<p><span>leisure interests:</span>  Dance, rock music, shopping, KTV with friends, swimming</p>
												<p><span>Class Status:</span>  junior</p>
												<p><span>Career Goals:</span>  IT</p>
											</div>
											<div class="pinkbtn">
												<a id="openDig" href="#">
												<span class="left"></span>
												<span class="repeat">
													<p class="loveBG">Date her now!</p>
												</span>
												<span class="right"></span>
												</a>
											</div>
									</div>
								</div>
								<div class="clear_float"></div>
								<div class="Tags">
									<dt>Tags</dt>
									<ul>
										<li>With photo</li>
										<li>Detailed personal info</li>
										<li>Same birthday</li>
										<li>Like party </li>
										<li>Like drinking</li>
										<li>WHate studying</li>
										<li>Love rock</li>
										<li>Shopping crazy </li>
										<li>Pet-keeper </li>
									</ul>
								</div>
								<div class="Details">
									<dt>Details</dt>
									<dd>Next in the tricky part because I am not sure when we should allow
										 them to submit their information into our database so that they can
										  be searchable as well. I was thinking about when they want more 
										  information to display from the results we could have a box pop out 
										  asking them to submit their information into our database. The message 
										  could say something like for example "before you can proceed your search
										   process please submit your info into our database so that other potential
										    friends could search for you"
									</dd>
								</div>
							</div>
						</div>
					</div>
				</div>
			
				
				<div class="body_foot"></div>
			</div>
			<div class="College_bg_foot"></div>
		</div>
		<div class="clear_float"></div>
		<div id="footer">
			
		</div>
		
		
		
	<!--dialog-->

			
	<script>
	$(function() {
		$( "#dialog" ).dialog({
			width:400,
			modal: true,
			autoOpen:false,
			buttons: {
				"Next": function() {
					$( this ).dialog( "close" );
				}
				
			}
		});
	
		$('#openDig').click(function(){
				$('#dialog').dialog('open');
				return false;
			});
	});
	</script>
	<style>
		.dialog{width:410px;display:none;}
		.progress_bar{
			height:25px;
			width:314px;
			margin:0 auto;
			background:url(img/progress_bar.png) 0 -55px;}
		.progress_data{
			width:320px;
			margin:0px auto;
		}
			.p1{margin-left:20px;color:#f7b54a;}
			.p2{margin-left:53px;}
			.p3{margin-left:110px;}
		.dialog em{color:red;}
		.diallog option{margin-bottom:10px;}
		.age{margin-bottom:10px;}
		.nextBtn{height:30px;border-top:1px #CCCCCC solid;margin-top:10px;padding-top:10px;position:relative;}
		.nextBtn input{position:absolute; right:10px;}
		.dialog fieldset{border:1px #CCCCCC solid;width:300px;marign:0 auto; padding:10px 0 10px 10px;}
		.dialog fieldset input{width:285px;}
		.dialog fieldset select{margin-bottom:12px;}
		.dialog legend{color:#CCCCCC;font-size:1.2em;}
		.dialog p img{vertical-align: middle;}
		.progress_data{margin-top:10px;}
		.progress_data p{margin-bottom:8px;}
		.progress_data input{margin-bottom:12px;}
		.dialog .f1{margin-right:75px;}
	</style>
	<div class="dialog" id="dialog">

		<div class="progress_bar"></div>
			<p class="pd">
				<span class="p1">Basic information</span>
				<span class="p2">Tags</span>
				<span class="p3">Finish</span>			
			</p>
    <div class="progress_data">	
	  <form>
	  	<p><label>Name:</label><em>*</em></p>
	  	<input type="text">
	  	<p><label>Tel:</label><em>*</em></p>
	  	<input type="text">
	  	<p><label>Age:</label><em>*</em></p>
	  	<select class="age">
	  		<option>21</option>
	  		<option>22</option>
	  		<option>23</option>
	  		<option>24</option>
	  		<option>25</option>	  		
	  	</select>
	  	<p>
	  		<span class="f1">I’m a <img src="img/male.png" alt="male" /></span>
	  		<input type="radio" id="male" name="sex" /><label for="male">Male</label>
	  		<input type="radio" id="female" checked="checked" name="sex" /><label for="female">Female</label>
	  	</p>
	  	<p>Looking for a
	  		<img src="img/female.png" alt="female" /> 
	  		<input type="radio" id="male2" checked="checked" name="sex1" /><label  for="male2">Male</label>
	  		<input type="radio" id="female2" name="sex1" /><label for="female2" >Female</label>
	  	</p> 	
	  </form>
  <form>
	  	<fieldset>
      <legend>Optional</legend>
        <p>Hometown:</p>
        <input type="text" />
        <p>Leisure interests:</p>
        <input type="text" />
        <p>Class status:</p>
        <select>
        	<option>Freshman</option>
        	<option>Sophomore</option>
        	<option>Junior</option>
        	<option>Senior</option>
        	<option>Master</option>
        	<option>Docter</option>        	
        </select>
        <p>Career goals:</p>
        <input type="text" />
    </fieldset>
    </form>
	 
	 </div>
	 
    
	</div>
	
	
	
	</body>
</html>
